<template>
  <div class="main-container">
    <div class="form-container">
      <div style="font-size: 25px; color: #009dff; font-weight: bolder; width: 100%; text-align:center; margin: 0 0 20px 0">个人信息</div>
      <el-form class="form"  :model="form" label-width="auto" style="max-width: 600px">
        <el-form-item label=" UserId" >
          <el-input v-model="form.userId" disabled/>
        </el-form-item>
        <el-form-item label=" UserName" >
          <el-input v-model="form.name" disabled/>
        </el-form-item>
        <el-form-item label="Birthday">
          <el-col :span="24">
            <el-date-picker
                v-model="form.birthday"
                type="date"
                style="width: 100%"
                disabled
            />
          </el-col>
        </el-form-item>
        <el-form-item label="Phone">
          <el-input v-model="form.phone" />
        </el-form-item>
        <el-form-item label="Password">
          <el-input v-model="form.password" />
        </el-form-item>
        <el-form-item label="Email">
          <el-input v-model="form.email" />
        </el-form-item>
        <el-form-item label="Position">
          <el-input v-model="form.position"disabled />
        </el-form-item>
        <el-form-item label="Sex">
          <el-input v-model="form.sex"disabled />
        </el-form-item>
        <el-form-item style="width: 100%; align-items: center">
          <div style="margin: 10px auto 0;">
            <el-button class="button" type="primary" @click="onSubmit" size="large">修改</el-button>
            <el-button class="button" @click="onCancel" size="large">取 消</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script  setup>
import {getCurrentInstance, reactive} from 'vue'
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
// import { ElMessage } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRouter } from 'vue-router'
import { useUserStore } from "@/store/User";
import router from "@/router";
const { proxy } = getCurrentInstance();
import axios from 'axios'
// const router = useRouter()
// 使用 useRoute 钩子获取当前路由对象
const route = useRoute();
const userStore = useUserStore();
onMounted(() => {

});
//显示原表单
const form = reactive({
  userId: userStore.getUser().userId,
  birthday: userStore.getUser().birthday,
  phone: userStore.getUser().phone,
  password: userStore.getUser().password,
  email: userStore.getUser().email,
  position: userStore.getUser().position,
  sex: userStore.getUser().sex,
  name: userStore.getUser().name,
})

// 初始化表单数据
const initForm = () => {
  form.userId = userStore.getUser().userId;
  form.birthday = userStore.getUser().birthday;
  form.phone = userStore.getUser().phone;
  form.password = userStore.getUser().password;
  form.email = userStore.getUser().email;
  form.position = userStore.getUser().position;
  form.sex = userStore.getUser().sex;
  form.name = userStore.getUser().name;
};
// 提交函数
  const onSubmit = async () => {
    // 构造要提交的数据
    const user = {
      userId: form.userId,
      password: form.password,
      name: form.name,
      sex: form.sex,
      birthday: form.birthday,
      phone: form.phone,
      email: form.email,
      position: form.position,
    };

    // 弹出确认框，等待用户确认
    ElMessageBox.confirm(
        '你确定要提交这些信息吗？',
        '确认提交',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        }
    ).then(async () => {
      // 用户点击确认时，发起请求
      let result = await proxy.Request({
        url: proxy.Api.updateUserInfo,
        showLoading: true,
        params: {
          phone: user.phone,
          email: user.email,
          password: user.password,
          userId: user.userId,
        },
      });

      // 提交成功后的操作
      ElMessage({
        message: '提交成功',
        type: 'success',
      });

      // 跳转到主页面
      router.push('/Main');
    }).catch(() => {
      // 用户点击取消时执行的操作
      ElMessage({
        message: '操作已取消',
        type: 'info',
      });
    });
  };

const onCancel = () => {
  // 清空表单
  initForm();
};
</script>


<style scoped>
.main-container{
  width: 100%;
}
.form-container{
  width: 700px;
  margin: 10px auto auto;
  padding: 2% 5%;
  border-radius: 20px;
  box-shadow: 0px 0px 15px 0px rgba(122, 122, 122, 0.3);
  -webkit-box-shadow: 0px 0px 15px 0px rgba(122, 122, 122, 0.3);
  -moz-box-shadow: 0px 0px 15px 0px rgba(122, 122, 122, 0.3);
}
.button{
  margin: 0 auto;
}
</style>